<!-- 上传图片控件 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header table-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel" class="modal-title">上传图片</h3>
            </div>
            <div class="modal-body">
                <form id="upload_image_form" method="POST" enctype="multipart/form-data" action="/admin/upload/index/" target="upload_image_iframe">
                    <input name="i" type="hidden" id="upload_image_form_i" />
                    <input name="upload_image_file" type="file" class="input-xlarge" />
                </form>
            </div>
            <div class="modal-footer modal-">
                <button data-dismiss="modal" class="btn btn-danger pull-left">取消</button>
                <button class="btn btn-info" data-dismiss="modal" onclick="document.getElementById('upload_image_form').submit();">开始上传</button>
            </div>
            <iframe id="upload_image_iframe" name="upload_image_iframe" width="0" height="0" frameborder="0" scrolling="no" src=""></iframe> 
        </div>
    </div>
</div>

<!-- 批量上传图片控件 -->
<div class="modal fade" id="myMutiModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header table-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel" class="modal-title">批量上传图片</h3>
            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>


<div id="muti-upload-template" class="hidden">
    <div class="photo-uploader">
        <div id="photo-uploader-files-box">
            <div class="files-info selected" id="photo-uploader-hander-box">
                <button id="spanSWFUploadButton">上传文件</button>
            </div>
            <div id="photo-uploader-files" class="files">
                <div class="thead">
                    <table>
                        <colgroup>
                            <col class="file">
                            <col class="size">
                            <col class="status">
                            <col class="opt">
                        </colgroup>
                        <tbody>
                            <tr>
                                <th class="file">文件</th>
                                <th class="size">大小</th>
                                <th class="status">状态</th>
                                <th class="opt">操作</th>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tbody">
                    <table>
                        <colgroup>
                            <col class="file">
                            <col class="size">
                            <col class="status">
                            <col class="opt">
                        </colgroup>
                        <tbody id="photo-uploader-files-list"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="submit-box " id="photo-uploader-submit-box">
            <p><button type="button" id="photo-uploader-submit" onclick="swfu.startUpload()"><img width="13" height="13" src="http://xnimg.cn/n/core/res/upload-bullet.png"> 开始上传</button></p>
        </div>
    </div> 
</div>

<ul id="image-preview-template" class="hidden">
    <!-- #section:pages/gallery.caption -->
    <li>
        <a data-rel="colorbox" href="{{image_src}}" class="cboxElement" target='_blank'>
            <img width="{{image_width}}" src="{{image_src}}" />
        </a>
        <div class="tools tools-bottom">
            <a href="javascript:void(0);" onclick="delpreviewimage(this)">
                <i class="ace-icon fa fa-times red"></i>
            </a>
        </div>
    </li>
</ul>

<script type="text/javascript">document.write("");</script>
<script type="text/javascript">
    //class为uploda_image的文本框获取上传控件
    $('.upload_image').each(function() {
        var self = this;
        $(this).uploadModal({
            obj: self,
            success: function(data) {
                $(self).val(data.dest_file_name);
                $(self).siblings('.imagewidth').val(data.width);
                $(self).siblings('.imageheight').val(data.height);
                imagePreview(self);
            }
        })
    });
    //class为muti_upload的文本框获取上传控件
    $('.muti_upload').each(function() {
        var self = this;
        $(this).mutiUploadModal({
            obj: self,
            success: function(data) {
                var textareavalue = $.trim($(self).val());
                var picArray = textareavalue.split("\n");
                picArray.push(data.dest_file_name);
                $(self).val(picArray.join("\n"));
            },
            allSuccess: function(data) {
                imagePreview(self);
            }
        })
    });
    var image_preview_i = 0;
    $(".image_preview").each(function() {
        imagePreview(this);
        image_preview_i++;
    });
    function imagePreview(obj) {
        if (!$(obj).attr("image_preview_i")) {
            $(obj).attr("image_preview_i", image_preview_i);
        }
        var ipi = $(obj).attr("image_preview_i");
        $("#ipc_" + ipi).remove();
        $(obj).after('<ul class="ace-thumbnails clearfix" id="ipc_' + ipi + '" ipi="' + ipi + '"></ul>');
        if ($(obj).get(0).tagName.toLowerCase() == "input") {
            if ($(obj).val()) {
                var html = template.render($("#image-preview-template").html()
                        , {"image_src": $(obj).val(), "image_width": $(obj).attr("image_preview_width"), "ipi": ipi, "i": 0});
                $("#ipc_" + ipi).html(html);
            }
        }
        if ($(obj).get(0).tagName.toLowerCase() == "textarea") {
            if ($(obj).val()) {
                var imageArray = $(obj).val().split("\n");
                var imghtml = '';
                for (var i in imageArray) {
                    if (!$.trim(imageArray[i])) {
                        continue;
                    }
                    var html = template.render($("#image-preview-template").html()
                            , {"image_src": imageArray[i], "image_width": $(obj).attr("image_preview_width")});
                    imghtml = imghtml + html;
                }
                $("#ipc_" + ipi).html(imghtml);
                loadsort($("#ipc_" + ipi));
            }
        }
    }

    //删除预览的图片
    function delpreviewimage(obj) {
        var ulobj = $(obj).parent().parent("li").parent('ul');
        var ipi = ulobj.attr('ipi');
        var sourceobj = $("[image_preview_i='" + ipi + "']");
        $(obj).parent().parent("li").remove();
        if (sourceobj.get(0).tagName.toLowerCase() == "input") {
            sourceobj.val("");
        }
        if (sourceobj.get(0).tagName.toLowerCase() == "textarea") {
            var imageArray = new Array();
            ulobj.find("img").each(function() {
                imageArray.push($(this).attr("src"));
            });
            sourceobj.val(imageArray.join("\n"));
        }
    }

    function loadsort(obj) {
        obj.sortable({
            stop: function(event, ui) {
                var ulobj = obj;
                var ipi = ulobj.attr('ipi');
                var sourceobj = $("[image_preview_i='" + ipi + "']");
                var imageArray = new Array();
                ulobj.find("img").each(function() {
                    imageArray.push($(this).attr("src"));
                });
                sourceobj.val(imageArray.join("\n"));
            }
        });
        obj.disableSelection();
    }
</script>


<!-- 弹出层 -->
<div id="modal-default-template" style="display: none;">
    <div tabindex="-1" class="modal fade" id="{{id}}" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header no-padding">
                    <div class="table-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                            <span class="white">×</span>
                        </button>
                        {{title}}
                    </div>
                </div>
                <div class="modal-body no-padding">
                    {{content}}
                    <div class="modal-footer no-margin-top">
                        <button data-dismiss="modal" class="btn btn-sm btn-danger pull-right">
                            <i class="ace-icon fa fa-times"></i>
                            关闭
                        </button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>

<!-- 表单弹出层 -->
<div id="modal-form-template" style="display: none;">
    <div tabindex="-1" class="modal fade" id="{{id}}" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header no-padding">
                    <div class="table-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                            <span class="white">×</span>
                        </button>
                        {{title}}
                    </div>
                </div>
                <div class="space-4"></div>
                <div class="modal-body no-padding">
                    {{content}}
                    <div class="modal-footer no-margin-top">
                        <button class="btn btn-info btn-sm submit-btn">
                            <i class="ace-icon fa fa-check"></i>
                            提交
                        </button>
                        <button data-dismiss="modal" class="btn btn-sm btn-danger pull-right close-btn">
                            <i class="ace-icon fa fa-times"></i>
                            关闭
                        </button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>

<!-- 选择列表弹出层 -->
<div id="modal-choose-template" style="display: none;">
    <div tabindex="-1" class="modal fade" id="{{id}}" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header no-padding">
                    <div class="table-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                            <span class="white">×</span>
                        </button>
                        {{title}}
                    </div>
                </div>
                <div class="space-4"></div>
                <div class="modal-body no-padding">
                    <div class="choose-content">
                        {{content}}
                    </div>
                    <div class="modal-footer no-margin-top">
                        <button class="btn btn-info btn-sm submit-btn">
                            <i class="ace-icon fa fa-check"></i>
                            选择
                        </button>
                        <button data-dismiss="modal" class="btn btn-sm btn-danger pull-right close-btn">
                            <i class="ace-icon fa fa-times"></i>
                            关闭
                        </button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>



<script type="text/javascript">
    //模板类
    var Template = {
        createNew: function() {
            var template = {};
            template.render = function(content, fields) {
                if (!content) {
                    return "";
                }
                for (k in fields) {
                    var regx = "{{" + k + "}}";
                    content = content.replace(new RegExp(regx, "g"), fields[k]);
                }
                return content;
            };
            return template;
        }
    };
    var template = Template.createNew();
    //自定的方法
    var Our = {
        createNew: function(params) {
            var our = {};
            our.modalAjaxList = function(options) {
                options.templateType = "default";
                $.ajax({
                    url: options.ajax.url,
                    type: options.ajax.type,
                    success: function(res) {
                        options.content = res;
                        our.showModal(options);
                    },
                    error: function() {
                    }
                });
            };
            //弹出层提示信息
            our.modalAlert = function(options) {
                options.content = '<div class="alert alert-block">'
                        + options.content
                        + '</div>';
                options.templateType = "default";
                our.showModal(options);
            }

            our.showModal = function(options) {
                for (var i = 1; i < 100; i++) {
                    if ($("#modal-" + i).length == 0) {
                        options.id = "modal-" + i;
                        break;
                    }
                }
                if (!options.width) {
                    options.width = "60%";
                }
                var modalHtml = template.render($("#modal-" + options.templateType + "-template").html(), {
                    id: options.id,
                    title: options.title,
                    content: options.content
                });
                $("body").append(modalHtml);
                $("#" + options.id).show();
                var height = $("#modal-1 .modal-dialog").height();
                $("#" + options.id).hide();
                var top = 5;
                if ($(window).height() - height > 0) {
                    top = ($(window).height() - height) / 2;
                }

                $('#' + options.id).css({
                    "width": options.width,
                });
                $('#' + options.id).css({
                    "left": ($("body").width() - $('#' + options.id).width()) / 2,
                    "top": top
                });
                $('#' + options.id + " .modal-dialog").css({"width": "100%", "margin": "auto"});
                $('#' + options.id).draggable({
                    handle: ".modal-header"
                });
                $('#' + options.id).modal({
                    keyboard: false,
                    backdrop: false,
                }).on('hide.bs.modal', function() {
                    $('#' + options.id).remove();
                });
                return options;
            }

            our.modalAjaxChoose = function(options) {
                options.templateType = "choose";
                options = this.showModal(options);

                var pageAClick = function() {
                    var uri = $(this).attr("href");
                    storeHttpRequest.request({
                        dataType: "json",
                        uri: uri,
                        data: {},
                        isOK: function(result) {
                            $("#" + options.id).find(".choose-content").html(result.data);
                            $("#" + options.id).find(".choose-a").bind("click", chooseAClick);
                            $("#" + options.id).find(".pagination").find("a").bind("click", pageAClick);
                        },
                        error: function() {
                        }
                    });
                    return false;
                }
                $("#" + options.id).find(".pagination").find("a").bind("click", pageAClick);

                var chooseAClick = function() {
                    var id = $(this).attr("data_id");
                    options.choose(id);
                }
                $("#" + options.id).find(".choose-a").bind("click", chooseAClick);

                $("#" + options.id).find(".submit-btn").click(function() {
                    var chooseContent = $("#" + options.id).find(".choose-content");
                    var ids = "";
                    chooseContent.find('input[name="' + options.keyName + '"]:checked').each(function() {
                        ids += "," + $(this).val();
                    });
                    if (ids === "") {
                        alert("一个都没有选择");
                        return false;
                    }
                    alert("选择成功");
                    options.choose(ids);
                });

                $(document).on('click', 'th input:checkbox', function() {
                    var that = this;
                    $(this).closest('table').find('tr > td:first-child input:checkbox')
                            .each(function() {
                                this.checked = that.checked;
                                $(this).closest('tr').toggleClass('selected');
                            });
                });
            };
            our.modalAjaxForm = function(options) {
                options.templateType = "form";
                options = this.showModal(options);
                $("#" + options.id).find(".submit-btn").click(function() {
                    var form = $("#" + options.id).find("form");
                    var data = {}
                    form.find("input").each(function() {
                        data[$(this).attr("name")] = $(this).val();
                    });
                    form.find("select").each(function() {
                        data[$(this).attr("name")] = $(this).val();
                    });
                    form.find("textarea").each(function() {
                        data[$(this).attr("name")] = $(this).val();
                    });
                    if (form.attr("target") !== "_blank") {
                        storeHttpRequest.request({
                            uri: form.attr("action"),
                            type: form.attr("method"),
                            data: data,
                            isOK: function(result) {
                                if (options.submitSuccess) {
                                    options.submitSuccess(data, result);
                                }
                                $("#" + options.id).find(".close-btn").click();
//                                showMessage("备注成功");
                            }
                        });
                    } else {
                        if (!form.attr("temp-action")) {
                            form.attr("temp-action", form.attr("action"));
                        }
                        var searchSubmitUri = form.attr("temp-action");
                        var searchValueArray = new Array();
                        form.find(':input').each(function() {
                            var val = $.trim($(this).val());
                            if (val !== '') {
                                if ($(this).attr('search-type') === 'normal') {
                                    searchSubmitUri += $(this).attr('name') + '/' + val + '/';
                                } else {
                                    searchValueArray.push($(this).attr('name'));
                                    searchValueArray.push(val);
                                }
                            }
                        });
                        if (searchValueArray.length > 0) {
                            searchSubmitUri += 'where/' + searchValueArray.join('__iceup__') + '/';
                        }
                        form.attr("action", searchSubmitUri);
                        form.submit();
                    }
                });
                //如果表单使用ajax提交，则取消回车提交事件
                var form = $("#" + options.id).find("form");
                if (form.attr("target") !== "_blank") {
                    form.submit(function() {
                        $("#" + options.id).find(".submit-btn").click();
                        return false;
                    });
                }
            };
            return our;
        }
    };
    our = Our.createNew();
</script>
</body>
</html>
